<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>基础：10、组件 自定义事件  使用自定义事件的表单输入组件</title>
	<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<currency-input v-model="price"></currency-input>
	</div>

	<script type="text/javascript">
		// 在前面的demo中我们介绍过v-model能实现双向数据绑定
		// 在学习了v-bind能对元素属性进行绑定，以及v-on对元素事件进行监听之后
		// 其实很容易发现，v-model可以用v-bind + v-on来实现
		// 实现的逻辑是这样的：
		// 	   v-bind绑定实例数据，当表单正在输入时，触发某个事件，它将实例数据更新为当前表单内输入的数据
		// 	   
		// <input v-bind:value="something" v-on:input="something = $event.target.value">
		// 
		// 所以当我们想对表单输入组件中输入的数据实现自定义的处理操作时，例如对输入去除前后空格，将字母格式化大小写等
		// 需要对表单用 v-bind 绑定数据，再用 v-on 绑定自定义实时处理
		// 下面来定义一个简单的货币输入自定义组件
		Vue.component('currency-input',{
			template: '\
				<span>\
					$\
					<input\
						ref="input"\
						v-bind:value="value"\
						v-on:input="updateValue($event.target.value)"\
					>\
				</span>\
				',
				props: ['value'],
				methods: {
					updateValue: function(value){
						// 去除前后空格                   保留2位小数
						var formattedValue = value.trim().slice(0, value.indexOf('.')+3)

						// 如果值不统一，手动覆盖以保持一致
						// $refs的作用：获取本组件的子组件，使用形式为vueobj.$refs.refID
						if(formattedValue!=value){
							this.$refs.input.value = formattedValue
						}
						// 通过input事件发出数值
						this.$emit('input', Number(formattedValue))
					}
				}
		})

		var vm = new Vue({
			el: '#app',
			data: {
				price: 10.00
			}
		})
	</script>
</body>
</html>
<!-- 代码均通过测试，有什么纰漏欢迎联系 QQ:1123176978  Wechat:hyhlovehuanong -->